<template>
	<div >
		<button type="button" @click="isShow = !isShow">显示/隐藏</button>
		<!-- 使transition有apear属性 一刷新就有动画效果 -->
		<transition-group 
			appear
			name="animate__animated animate__bounce"
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutDown"
		>
			<h1 v-show="!isShow" key='1'>你好啊</h1>
			<h1 v-show="isShow" key='2'>尚硅谷!</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default{
		name:'Test',
		data(){
			return{
				isShow:true
			}
		}
	}
</script>

<style scoped>
	h1{
		background-color: #ffaa00;
		/* transition: 0.5s linear; */
	}
	
</style>
